<script setup lang="ts">
import { computed } from "@vue/reactivity";
import { ref, onMounted } from "vue";
import { UseLibraryState } from "../library_state";
import AddBookForm from "./AddBookForm.vue";
import AddReaderForm from "./AddReaderForm.vue";
import ImportBookForm from "./ImportBookForm.vue";
import ImportReaderForm from "./ImportReaderForm.vue";
import UsersView from "./UsersView.vue";

const state=UseLibraryState()

const managers:Map<string,any>=new Map()

managers.set('book-add',AddBookForm)
managers.set('book-import',ImportBookForm)
managers.set('reader-add',AddReaderForm)
managers.set('reader-import',ImportReaderForm)
managers.set('reader-view',UsersView)


const active_manager_name=ref('empty')

const active_manager=computed(()=>managers.get(active_manager_name.value))
</script>

<template>
<div class="manager-container h-full w-full">
<el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        class="h-full overflow-hidden"
        default-active="1"
        text-color="#fff"
        :default-openeds="['1','2']">
        <el-sub-menu index="1" v-if="state.can_manage_book">
          <template #title>
            <span>书籍管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="1-1" @click="active_manager_name='book-add'">添加</el-menu-item>
            <el-menu-item index="1-2" @click="active_manager_name='book-import'">导入</el-menu-item>
            <!-- <el-menu-item index="1-3">修改</el-menu-item> -->
          </el-menu-item-group>
        </el-sub-menu>
        <el-sub-menu index="2" v-if="state.can_manage_user">
          <template #title>
            <span>读者管理</span>
          </template>
          <el-menu-item-group>
            <el-menu-item index="2-1" @click="active_manager_name='reader-view'">浏览</el-menu-item>
            <el-menu-item index="2-2" @click="active_manager_name='reader-add'">添加</el-menu-item>
            <el-menu-item index="2-3" @click="active_manager_name='reader-import'">导入</el-menu-item>
          </el-menu-item-group>
        </el-sub-menu>
      </el-menu>
    <div class="h-full w-full border-[2px] -ml-[2px] border-l-0 box-border border-solid border-gray-100 shadow-lg flex justify-center items-center">
    <p v-if="active_manager_name=='empty'">请在菜单中选择管理面板!</p>
    <keep-alive>
        <component :is="active_manager"></component>
    </keep-alive>
    </div>
</div>
</template>

<style scoped>
.manager-container{
    display: grid;
    grid-template-columns: 150px 1fr;
}


</style>
<style>
</style>
